<template>
  <el-form :model="smtpForm" :rules="smtpRules" ref="smtpFormRef">
    <h2 class="setting-title">修改SMTP设置</h2>
    <!-- SMTP 服务器地址 -->
    <el-form-item label="SMTP服务器" prop="server">
      <el-input v-model="smtpForm.server" placeholder="请输入SMTP服务器地址"></el-input>
    </el-form-item>

    <!-- SMTP 端口 -->
    <el-form-item label="端口" prop="port">
      <el-input v-model="smtpForm.port" placeholder="请输入端口号" type="number" min="1" max="65535"
        @input="validatePort"></el-input>
      <!-- <el-input-number v-model="smtpForm.port" :min="1" :max="65535"/> -->
    </el-form-item>

    <!-- 发件人邮箱 -->
    <el-form-item label="发件人邮箱" prop="email">
      <el-input v-model="smtpForm.email" placeholder="请输入发件人邮箱"></el-input>
    </el-form-item>

    <!-- 邮箱密码/授权码 -->
    <el-form-item label="邮箱密码" prop="password">
      <el-input v-model="smtpForm.password" placeholder="请输入邮箱密码/授权码" show-password></el-input>
    </el-form-item>

    <!-- 启用 SSL -->
    <el-form-item label="启用SSL" prop="ssl">
      <el-switch v-model="smtpForm.ssl"></el-switch>
    </el-form-item>

    <!-- 保存按钮 -->
    <el-form-item label-width="60px">
      <el-button type="primary" @click="saveSettings">保存设置</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getSmtpSetting, updateSmtpSetting } from "@/api/email";

const emit = defineEmits()

// 表单数据
const smtpForm = reactive({
  server: "",
  port: 465,
  email: "",
  password: "",
  ssl: true,
});

onMounted(() => {
  // 获取 SMTP 配置
  getSmtpSetting({}).then(res => {
    smtpForm.server = res.host
    smtpForm.port = res.port
    smtpForm.email = res.username
    smtpForm.password = res.password
    if (res.encryption === "ssl") {
      smtpForm.ssl = true
    } else {
      smtpForm.ssl = false
    }
  })
})

// 验证端口
function validatePort() {
  // 端口号应在 1 到 65535 之间
  if (smtpForm.port < 1) {
    smtpForm.port = 1;
  } else if (smtpForm.port > 65535) {
    smtpForm.port = 65535;
  }
}
// 表单验证规则
const smtpRules = {
  server: [{ required: true, message: "请输入SMTP服务器地址", trigger: "blur" }],
  port: [
    { required: true, message: "请输入端口号", trigger: "blur" },
    // {
    //   type: "number",
    //   min: 1,
    //   max: 65535,
    //   message: "端口号范围应在1到65535之间",
    //   trigger: "blur",
    // },
  ],
  email: [
    { required: true, message: "请输入发件人邮箱", trigger: "blur" },
    { type: "email", message: "请输入有效的邮箱地址", trigger: "blur" },
  ],
  password: [{ required: true, message: "请输入邮箱密码/授权码", trigger: "blur" }],
};

// 表单引用
const smtpFormRef = ref(null);

// 保存设置
const saveSettings = () => {
  smtpFormRef.value.validate((valid) => {
    if (valid) {
      // 调用后端 API 保存 SMTP 设置
      // console.log("保存的设置：", smtpForm);
      let smtpSetting = {
        host: smtpForm.server,
        port: Number(smtpForm.port),
        username: smtpForm.email,
        password: smtpForm.password,
        encryption: smtpForm.ssl ? "ssl" : "none"
      }

      updateSmtpSetting(smtpSetting).then(res => {
        if (res.message === "SMTP setting updated successfully") {
          ElMessage.success("SMTP 设置已保存！");
          emit("updateShowSmtpSetting")
        } else {
          ElMessage.error("SMTP设置保存失败，请重试");
        }
      })

    } else {
      ElMessage.error("表单验证失败，请检查输入");
    }
  });
};

// 重置表单
const resetForm = () => {
  smtpFormRef.value.resetFields();
};
</script>

<style scoped lang="scss">
.el-form {
  margin-top: 20px;
}
.setting-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: #333;
}
</style>
